<!--
 * @Author: linzq
 * @Date: 2021-02-20 16:07:29
 * @LastEditors: linzq
 * @LastEditTime: 2021-08-06 16:14:57
 * @Description: 
-->
<template>
  <div>
    <CodeMirror v-model="code" :options="cmOptions"></CodeMirror>
    <CodeMirror :merge="true" :options="marge"></CodeMirror>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    return {
      code: `var data = {
  'token': 'your token', 
  'uid': 'xxx@corp.netease.com', 
  'model': '通用模型', 
  'text': '年倾人不讲武德，偷袭我这个69岁的老仁家，传统功夫讲究的是‘点到为止’。'
};
   		 console.log(data );
   		 `,
      marge: {
        value: 'value', // 上次内容
        origLeft: null,
        orig: 'orig2', // 本次内容
        lineNumbers: true, // 显示行号
        mode: 'text/html',
        highlightDifferences: true,
        connect: 'align',
        revertButtons: true, // 是否显示还原按钮
        readOnly: true // 只读 不可修改
      },
      cmOptions: {
        mode: 'text/javascript',
        tabSize: 2,
        styleActiveLine: true,
        lineNumbers: true,
        theme: 'rubyblue',
        smartIndent: true,
        line: true,
        // readOnly: true,
        // lineWrapping: true,

        styleSelectedText: true,
        foldGutter: true, // 块槽
        gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
        highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true }, // 可以启用该选项来突出显示当前选中的内容的所有实例
        // hint.js options
        hintOptions: {
          // 当匹配只有一项的时候是否自动补全
          completeSingle: false
        },
        // 快捷键 可提供三种模式 sublime、emacs、vim
        // keyMap: 'emacs',
        matchBrackets: true,
        showCursorWhenSelecting: true,
        styleActiveLine: true,
        extraKeys: { Ctrl: 'autocomplete' }
      }
    }
  },
  //监听属性 类似于data概念
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  //方法集合
  methods: {}
}
</script>
<style lang='less' scoped>
</style>